<template>
    <div class="navigation">
        <button class="back" @click="backFn"/>
        <div class="title">{{title}}</div>
    </div>
</template>
<script lang="ts">
    import Vue from 'vue';
    import {
        Emit,
        Prop,
        Watch,
        Component
    } from 'vue-property-decorator';

    @Component({
        name: `navigation`
    })
    export default class Navigation extends Vue {
        @Prop({default: ``}) title!: string;
        @Prop({default:null}) onBack!:any

        mounted() {
            this.onTitleChange(this.title);
        }

        get routes(): Array<string> {
            return this.$navigation.getRoutes() || [];
        }

        get hasHome(): boolean {
            return this.routes.join(``).includes(`topic`);
        }

        get routeName() {
            const {
                name = ``
            } = this.$route || {};
            return name;
        }

        get checkIndex(): number {
            return this.routes.findIndex((path: any) => (
                path.includes(this.routeName)
            ))
        }

        get replaceHome(): boolean {
            return this.checkIndex <= 1 && !this.hasHome;
        }

        @Emit(`back`)
        private backFn() {
            if(!!this.onBack) {
                return this.onBack()
            }
            if (this.replaceHome) {
                this.$router.replace(`/`);
            }
            else {
                window.history.back();
            }
        }

        @Watch(`title`)
        onTitleChange(title: string) {
            document.title = title;
        }
    }
</script>

<style scoped lang="scss">
    .navigation {
        height: 52px;
        background-color: #fff;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        box-shadow: 1px 1px 3px #ececec;
        z-index: 99;
    }

    .back {
        width: 52px;
        height: 52px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        background-image: url("./../../static/back@2x.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 40%;
        background-color: #fff;
        &:active {
            opacity: .7;
        }
    }

    .title {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        text-align: center;
        line-height: 52px;
        font-size: 16px;
        font-weight: 500;
        color: #333;
        padding: 0 56px;
        z-index: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
</style>